import React, { useState, useEffect } from 'react';
import { Layout, Tabs, Button } from "antd";
import { 
  FullscreenOutlined,
  CloseOutlined 
} from "@ant-design/icons";
import WorkflowSteps from "./components/WorkflowSteps";
import FeatureInfo from "./components/FeatureInfo";
import ChangeInfo from "./components/ChangeInfo";
import ActionButtons from "./components/ActionButtons";
import { message } from "antd";
import { ApprovalData, ApprovalStatus, WorkflowStep } from "./types";
import { APPROVAL_STATUS } from "./constants";
import style from "./index.less";
import { fetchApprovalData } from './service';

const { TabPane } = Tabs;

const Pg3: React.FC = () => {
  const [approvalData, setApprovalData] = useState<ApprovalData | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [activeTab, setActiveTab] = useState<string>('change');

  useEffect(() => {
    // 获取审批数据
    const loadData = async () => {
      try {
        setLoading(true);
        const data = await fetchApprovalData();
        setApprovalData(data);
        setLoading(false);
      } catch (error) {
        message.error('获取审批信息失败');
        setLoading(false);
      }
    };

    loadData();
  }, []);

  const handleClose = () => {
    // 返回上一页或关闭当前页面
    window.history.back();
  };
  
  const handleSave = async () => {
    try {
      setLoading(true);
      // 调用API进行保存操作
      message.success('保存成功');
      setLoading(false);
    } catch (error) {
      message.error('保存失败');
      setLoading(false);
    }
  };
  
  const handleReject = async () => {
    try {
      setLoading(true);
      // 调用API进行拒绝操作
      message.success('已拒绝');
      setLoading(false);
    } catch (error) {
      message.error('操作失败');
      setLoading(false);
    }
  };
  
  const handleApprove = async () => {
    try {
      setLoading(true);
      // 调用API进行同意操作
      message.success('已同意');
      setLoading(false);
    } catch (error) {
      message.error('操作失败');
      setLoading(false);
    }
  };

  // 处理标签页切换
  const handleTabChange = (activeKey: string) => {
    setActiveTab(activeKey);
  };

  return (
    <div className={style["approval-dialog"]}>
      <div className={style["dialog-header"]}>
        <div className={style["dialog-title"]}>项目需求内容变更</div>
        <div className={style["dialog-actions"]}>
          <Button type="text" icon={<FullscreenOutlined />} />
          <Button type="text" icon={<CloseOutlined />} onClick={handleClose} />
        </div>
      </div>
      
      <div className={style["dialog-content"]}>
        {/* 左侧审批流程 */}
        {approvalData && (
          <div className={style['workflow-sidebar']}>
            <WorkflowSteps workflow={approvalData.workflow} loading={loading} />
          </div>
        )}
        
        {/* 右侧内容区 */}
        <div className={style["main-content"]}>
          <Tabs 
            activeKey={activeTab} 
            onChange={handleTabChange}
            className={style['custom-tabs']}
          >
            <TabPane tab="查看完整流程历史" key="history">
              {/* 历史记录内容 */}
              <div className={style['tab-content']}>
                流程历史记录
              </div>
            </TabPane>
            
            <TabPane tab="变更信息" key="change">
              <div className={style['tab-content']}>
                {approvalData && (
                  <>
                    <FeatureInfo 
                      featureInfo={approvalData.formData.featureInfo} 
                      loading={loading}
                    />
                    <ChangeInfo 
                      changeInfo={approvalData.formData.changeInfo} 
                      loading={loading}
                    />
                  </>
                )}
              </div>
            </TabPane>
            
            <TabPane tab="信息通知" key="notification">
              {/* 信息通知内容 */}
              <div className={style['tab-content']}>
                信息通知内容
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
      
      {/* 底部操作按钮 */}
      <div className={style['footer']}>
        {approvalData && (
          <>
            <div className={style['handler-list']}>
              <span className={style['handler-label']}>联系相关处理人</span>
              {approvalData.handlers.map((handler, index) => (
                <div key={index} className={style['handler-avatar']}>
                  {handler.name.charAt(0)}
                </div>
              ))}
            </div>
            <ActionButtons 
              onClose={handleClose}
              onSave={handleSave}
              onApprove={handleApprove}
              onReject={handleReject}
              loading={loading}
            />
          </>
        )}
      </div>
    </div>
  );
};

export default Pg3;
